<%@page import="net.ge.mosq.jdo.entity.AccountItem"%>
<%@page import="java.util.List"%>
<%@page import="net.ge.mosq.service.AccountService"%>
<%@page import="net.ge.mosq.service.ServiceFactory"%>
<%@page import="net.ge.mosq.Constants"%>
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" href="js/jquery.treeview.css" />
<script type="text/javascript" src="js/jscolor.js"></script>
<script src="js/lib/jquery.js" type="text/javascript"></script>
<script src="js/lib/jquery.cookie.js" type="text/javascript"></script>
<script src="js/jquery.treeview.js" type="text/javascript"></script>
<style type="text/css">
<!--
#main {
	float: left;
	height: auto;
	width: auto;
	border: 0px solid #FF0000;
}

#left {
	float: left;
	height: 400px;
	width: 200px;
	border: 0px solid #00FF00;
}

#right {
/* padding-left: 100px; */
margin-left: 50px;
	float: right;
	height: 400px;
	width: 300px;
 	border: 0px solid #000000;
	float: right;
}

.left_div {
	border: 0px solid #999999;
}
.selected {
    background-color: red;
}
-->
</style>
<script type="text/javascript">
	$(function() {
		$("#tree").treeview();
		$("li a").click(function(){
			var arr = $("li a");
			for (var i = 0; i < arr.length; i++) {
				arr[i].style.background = "";
			}
			this.style.background = "#c5e7f6";
			$("#<%=Constants.ACCOUNT_PARENTID%>").val(this.id.split("_")[0]);
			
			var Equity = "<option value=\"Equity\">Equity</option>";
			//----------------------------------------------------------------
			var Income = "<option value=\"Liability\">Liability</option>";
			var Expense = "<option value=\"Expense\">Expense</option>";
			//----------------------------------------------------------------
			var Asset = "<option value=\"Asset\">Asset</option>";
			var Cash = "<option value=\"Cash\">Cash</option>";
			var Bank = "<option value=\"Bank\">Bank</option>";
			var Asset = "<option value=\"Income\">Income</option>";
			var CreditCard = "<option value=\"Credit Card\">Credit Card</option>";
			
			var currentType = this.id.split("_")[1] == undefined ? "ALL" : this.id.split("_")[1];
			switch (currentType)
			   {
			   case "Equity":
				   $("select")[0].innerHTML = Equity;
			     break;
			   case "Income":
			   case "Expense":
				   $("select")[0].innerHTML = Income;
				   $("select")[0].innerHTML += Expense;
			     break;
			   case "ALL":
				   $("select")[0].innerHTML = Asset;
    		       $("select")[0].innerHTML += Cash;
    		       $("select")[0].innerHTML += Bank;
    		       $("select")[0].innerHTML += Asset;
    		       $("select")[0].innerHTML += CreditCard;
    		       $("select")[0].innerHTML += Income;
    		       $("select")[0].innerHTML += Expense;
    		       $("select")[0].innerHTML += Equity;
			     break;
			   default:
				   $("select")[0].innerHTML = Asset;
    		       $("select")[0].innerHTML += Cash;
    		       $("select")[0].innerHTML += Bank;
    		       $("select")[0].innerHTML += Asset;
    		       $("select")[0].innerHTML += CreditCard;
			    }
			return false;
		});
	});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>${ title }</title>
</head>
<body>
  <div style="width: 1000px; height: 800px; text-align: left;">
    <form action="A002.html" method="post">
      <fieldset>
        <legend>Account Fields</legend>
        <p>
          <label for="<%=Constants.ACCOUNT_NAME%>">Accounnt Name</label><br />
          <input id="<%=Constants.ACCOUNT_NAME%>" name="<%=Constants.ACCOUNT_NAME%>" type="text" />
        </p>
        <p>
          <label for="<%=Constants.ACCOUNT_CODE%>">Accounnt Code</label><br />
          <input id="<%=Constants.ACCOUNT_CODE%>" name="<%=Constants.ACCOUNT_CODE%>" type="text" />
        </p>
        <p>
          <label for="<%=Constants.ACCOUNT_DESCRIPTION%>">Accounnt Description</label><br />
          <input id="<%=Constants.ACCOUNT_DESCRIPTION%>" name="<%=Constants.ACCOUNT_DESCRIPTION%>" type="text" />
        </p>
        <p>
          <label for="<%=Constants.ACCOUNT_CURRENCY%>">Accounnt Currency</label><br />
          <input id="<%=Constants.ACCOUNT_CURRENCY%>" name="<%=Constants.ACCOUNT_CURRENCY%>" type="text" />
        </p>
        <p>
          <label for="<%=Constants.ACCOUNT_COLOR%>">Accounnt Color</label><br />
          <input id="<%=Constants.ACCOUNT_COLOR%>" name="<%=Constants.ACCOUNT_COLOR%>" type="text" class="color" readonly="readonly" />
        </p>
        <p>
          <label for="<%=Constants.ACCOUNT_NOTES%>">Accounnt Note</label><br />
          <textarea rows="3" cols="100" name="<%=Constants.ACCOUNT_NOTES%>" id="<%=Constants.ACCOUNT_NOTES%>"></textarea>
        </p>
        <p>
          <input type="checkbox" value="1" name="<%=Constants.ACCOUNT_PLACEHOLDER%>" id="<%=Constants.ACCOUNT_PLACEHOLDER%>">
          &nbsp;PLACEHOLDER
        </p>
        <div id="main">
          <div id="left">
            <label for="<%=Constants.ACCOUNT_TYPE%>">Accounnt Type</label><br />
            <select id="<%=Constants.ACCOUNT_TYPE%>" name="<%=Constants.ACCOUNT_TYPE%>" size="20" style="width: 200px; height: 300px;">
            </select>
          </div>
          <div id="right">
            <label for="Parent">Parent</label><br />
            <input id="<%=Constants.ACCOUNT_PARENTID%>" name="<%=Constants.ACCOUNT_PARENTID%>" type="hidden" />
            <div style="overflow: auto; width: 300px; height: 300px; border: 1px inset #000000;">
            <ul id="tree">
              <li><a href="#" id="0">TOP</a>
                <%
            		AccountService as = ServiceFactory.getAccountService();
            		List<AccountItem> items = as.getAllAccountWithTransInfoFlat("common");
            		int indent = 0;
            		boolean isFirst = true;
            		for (AccountItem acc : items) {
      
            			if (acc.getLevel() == indent) {
            				if (isFirst) {
            					isFirst = false;
            					%><ul><%
            				} else {
            					%></li><%
            				}
            			}
            			if (acc.getLevel() > indent) {
            				%><ul><%
            			}
            			if (acc.getLevel() < indent) {
            				%></li><%
            				for (int i = 0; i < indent - acc.getLevel(); i++) {
            					%></ul></li><%
            				}
      
            			}
            			%><li><a href="#" id="<%=acc.getId()%>_<%=acc.getType()%>"><%=acc.getName()%></a><%
            			indent = acc.getLevel();
            		}
                  %></li><% for (int i = 0; i < indent; i++) { %></ul></li><%}if(!isFirst)out.println("</ul>");%>
              </li>
            </ul>
            </div>
          </div>
        </div>
        <p>
          <input id="create" type="submit" value="Create" />
        </p>
      </fieldset>
    </form>
  </div>
</body>
</html>